<template>
      <div class="shortCutMenu pb20" id="shortmenu">
          <el-row style="width:150px;">
            <el-col :span="24" class="menu plr15 ptb10">shortCutMenu</el-col>
            <el-col :span="24" class="shortCut" v-for="item in items"><a @click="toMenu(item)">{{ item.bsnName }}<div class="line">——</div></a></el-col>
            <div v-if="isCloseMenu"><el-col :span="24" class="tac menuIcon"><i class="el-icon-caret-top"></i></el-col>
            <el-col :span="24" class="retract tac"><a @click="up()">close</a></el-col></div>
            <div v-if="isOpenMenu"><el-col :span="24" class="tac menuIcon"><i class="el-icon-caret-bottom"></i></el-col>
            <el-col :span="24" class="retract tac"><a @click="down()">expand</a></el-col></div>
          </el-row>
      </div>
</template>

<script>
export default {
    data() {
        return {
            items:[],
            isCloseMenu:true,
            isOpenMenu:false,
        }
    },
    name:'shortCutMenu',
    components:{
    
    },
    methods:{
        up(){  //收起快捷菜单方法
            let _this = this
            $(".shortCut").slideUp("show")
            _this.isCloseMenu = false
            _this.isOpenMenu = true
        },
        down(){  //展开快捷菜单方法
            let _this = this
            $(".shortCut").slideDown("slow")
            _this.isCloseMenu = true
            _this.isOpenMenu = false 
        },
        getShortMenu(){     //请求快捷菜单
            let _this = this
            let body = {}
            body.userNo = this.$tools.storage.get("user","save").eCIFID,
            body.count = '5'//快捷菜单显示条数
            _this.$tools.request(_this,"IM0701QueryAction.do",body).then(data =>{
                //console.log("data:"+JSON.stringify(data))
                _this.items = data.body.imBsnList
                _this.items.push({bsnName: 'setting',menuFlag:'/personalSet' })
                //console.log("快捷菜单:"+_this.items)
            })
        },
        toMenu(val){
            let _this = this
            //console.log("跳转地址:"+val.url)
            _this.$router.push({ path: val.menuFlag+'' })
        },
        toggle(){
            //console.log
            $(e.target).find(".shortCut").slideToggle("show")
            //$(e.currentTarget).find(".shortCut").slideToggle("show")
            $(e.currentTarget).find(".shortCut").slideToggle("fast",
               function(){
                   console.log(123456)
               },
            )
            //console.log("显示隐藏方法")
        },
    },
    mounted: function () {
        let _this = this;
        _this.getShortMenu()
    }
}

</script>
<style lang="scss">
.shortCutMenu{position:float;top:450px;margin-left:40%;}
//.shortCutMenu{position:absolute;width:20%;margin-left:10%;}
.menu{height:40px;background:#4c4c4c;color:#fff;font-size:16px;}
.shortCut{height:40px;line-height:40px;color:#353535;background:#fff;text-align:center;position:relative;}
.shortCut .line{position:absolute;top:46%;right:32%;color:#ee6b00;display:none;}
.shortCut a{display: block;}
.shortCut a:hover{color:#ee6b00;}
.shortCut a:hover .line{display:block;}
.menuIcon{font-size:25px;color:#ee6b00;position:absolute;bottom:-23px;right:1px;}
.retract{height:30px;line-height:30px;background:#a6a6a6;color:#fff;position:absolute;bottom:-51px;right:-1px;}
</style>